<template>
  <div class="demo-title">badge/demo1</div>
  <div class="demo">
    <div class="item">
      <div class="item-bg">
        <Badge :dot="true">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Dot badge</p>
    </div>
    <div class="item">
      <div class="item-bg">
        <Badge :value="12">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Number badge</p>
    </div>
    <div class="item">
      <div class="item-bg">
        <Badge :value="2">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Odd badge</p>
    </div>
    <div class="item">
      <div class="item-bg">
        <Badge :value="1000" :max="99">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Maximum badge</p>
    </div>
  </div>
  <div class="demo">
    <div class="item">
      <div class="item-bg">
        <Badge value="New">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Text badge</p>
    </div>
    <div class="item">
      <div class="item-bg">
        <Badge value="On Sale">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Multiple text</p>
    </div>
    <div class="item">
      <div class="item-bg">
        <Badge :image="Bicon">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Icon badge</p>
    </div>
    <div class="item">
      <div class="item-bg">
        <Badge value="New">
          <div class="square"></div>
        </Badge>
      </div>
      <p>Title text</p>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import Badge from '@sscd-mobile/badge'
  const Bicon = 'https://ssc-design-1311112663.cos.ap-guangzhou.myqcloud.com/components/h5/badge/b-icon.png'
</script>
<style lang="less" scoped>
  .demo {
    display: flex;
    justify-content: space-evenly;
    background-color: white;
    height: 100px;
    width: 100%;
    .item {
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      align-items: center;
      .item-bg {
        width: 50px;
        height: 50px;
        .square {
          width: 40px;
          height: 40px;
          border-radius: 5px;
          background: #ececec;
        }
      }
    }
    p {
      font-size: 12px;
    }
  }
</style>
